<script lang="ts" name="person-new" setup>
import { reactive, toRefs, toRef } from 'vue'

let person = reactive( {
  name: '张三',
  age: 18
})

// let {name, age} = person //直接解构出来的数据不是响应式的
let {name, age} = toRefs(person) //解构出来的数据是响应式的
let nl = toRef(person, 'age')
console.log(nl.value)
// console.log(name)//ObjectRefImpl {_object: Proxy(Object), _key: 'name', _defaultValue: undefined, __v_isRef: true}
// console.log(age)
//toRefs的作用就是将reactive的对象变成ref的对象
function changeName () {
  name.value += '~'
  // console.log(name)//这个会改变
}
function changeAge () {
  age.value += 1
}
</script>

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>姓名: {{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>